<template>
  <div>
    <!-- 设置服药时间 -->
    <el-dialog v-model="dialogVisible" title="设置服药时间" width="500" :before-close="handleClose">
      <span>
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
        >
          <table style="width: 100%">
            <tr>
              <th class="time">时间</th>
              <th>服用说明</th>
              <th><el-button type="primary" style="font-size: 20px" @click="add">+</el-button></th>
            </tr>
            <tr v-if="!arr.length">
              <td colspan="3" style="line-height: 60px; text-align: center">暂无数据</td>
            </tr>
            <tr v-for="(item, index) in arr">
              <td>
                <el-time-picker
                  v-model="item.time"
                  value-format="HH:mm"
                  format="HH:mm"
                  placeholder="选择时间"
                />
              </td>
              <td>
                <el-input v-model="item.content" />
              </td>
              <td>
                <el-button type="primary" style="width: 100%; font-size: 20px" @click="sub(index)">
                  -
                </el-button>
              </td>
            </tr>
          </table>
          <el-form-item label="开始时间" prop="name" style="margin-top: 10px">
            <el-date-picker
              v-model="ruleForm.startDate"
              style="width: 100%"
              type="datetime"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, defineProps, reactive } from "vue";
import { AddPlansParams, PlansData } from "@/api/medicalcare/medicinelogs/type";
import { addDrugPlan } from "@/api/medicalcare/medicinelogs/medicinelogs";

const props = defineProps({
  currentId: Number,
});
const emit = defineEmits(["close"]);
const dialogVisible = ref(true);

let arr = ref<PlansData[]>([]);
//添加
const add = () => {
  let nums = 0;
  nums++;
  for (let i = 0; i < nums; i++) {
    arr.value.push({ time: "", content: "" });
  }
};

//删除
const sub = (index: number) => {
  arr.value.splice(index, 1);
};
//添加参数
const ruleForm = reactive<AddPlansParams>({
  drugId: props.currentId ? Number(props.currentId) : 0,
  startDate: "",
  plans: [],
});

//确定
const submit = async () => {
  ruleForm.plans = arr.value;
  //添加
  await addDrugPlan(ruleForm);
  ElMessage({
    message: "添加成功",
    type: "success",
  });
  emit("close", true);
};

//关闭
const handleClose = () => {
  console.log("111关闭");

  emit("close");
};
</script>

<style scoped></style>
